<template>
  <div class="availableQuota">
    <div class="function">
      <div>
        <a-button type="primary" class="btn" :size="size"> 添加核证排放量</a-button>
      </div>
    </div>

    <!-- 配额总览 -->
    <a-table
      ref="table"
      size="middle"
      :scroll="{ x: true }"
      bordered
      rowKey="id"
      :columns="columns"
      :loading="loading"
      class="j-table-force-nowrap"
      @change="handleTableChange"
    >
    </a-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      size: '',
      columns: [
        {
          title: '核证年份',
          align: 'center',
          dataIndex: 'name',
        },
        {
          title: '核证排放量tCO₂e',
          align: 'center',
          dataIndex: 'miaosu',
        },
        {
          title: '归属组织',
          align: 'center',
          dataIndex: 'company',
        },
        {
          title: '记录日期',
          align: 'center',
          dataIndex: 'people',
        },
        {
          title: '操作',
          align: 'center',
          sorter: true,
          dataIndex: 'updateTime',
        },
      ],
    }
  },
}
</script>

<style lang="scss" scoped>
.availableQuota {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  .function {
    margin-bottom: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    .ant-btn-primary {
      background: #0c67ee;
    }
    .btn {
      margin-right: 6px;
      font-size: 14px;
    }
  }
  .total {
    display: flex;
    flex-direction: row;
    align-items: center;
    border: 1px solid #77d7ff;
    background: rgba(119, 215, 255, 0.1);
    border-radius: 4px;
    padding: 6px 20px;
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 400;
    color: #2d303b;
    .blue {
      color: rgb(40, 120, 255);
    }
    .black {
      font-size: 16px;
      font-weight: 700;
      color: #2d303b;
    }
  }
  .name {
    font-size: 12px;
    display: flex;
    flex-direction: row;
    align-items: center;
    .anticon {
      font-size: 22px;
      margin-right: 6px;
    }
  }
  .val {
    font-size: 22px;
    margin-top: 2px;
    font-weight: 600;
  }
}
// 配额总览
.quotaOverview {
  background: url('@/assets/img/assets/bg_1.png');
  background-size: cover;
  padding: 20px;
  .quota {
    height: 80px;
    .top {
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    .bg {
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: rgba(233, 237, 241, 0.2);
    }
    .title {
      font-size: 12px;
    }
    .h4 {
      font-size: 16px;
    }
    .val {
      margin-top: 6px;
      font-size: 12px;
    }
    .anticon {
      margin-right: 6px;
    }
  }
}
// 分配/交易
.distribution {
  display: flex;
  flex-direction: row;
  // width: 100%;
  padding: 0 20px;
  ul {
    padding: 0;
    width: 100%;
    margin-top: 10px;
    li {
      list-style: none;
      border-bottom: 1px solid #e7e7e7;
      padding: 10px 0px;
      display: flex;
      flex-direction: row;
      // justify-content: space-between;
      justify-content: flex-start;
      div {
        width: 50%;
        font-size: 12px;
      }
      .forecast {
        padding: 4px 10px;
        color: rgba(12, 103, 238, 0.5);
        margin-left: 10px;
        cursor: pointer;
        border-radius: 4px;
        border: 1px solid rgba(12, 103, 238, 0.5);
        .anticon {
          margin-left: 6px;
          font-weight: 600;
          font-size: 16px;
          color: rgba(12, 103, 238, 0.5);
        }
      }
    }
  }
}
</style>